<template>
  <div class="container">
    <el-card class="box-card">
      <!--      Header-->
      <div>
        <el-col :span="12">
          <el-row>
            关键字
            <el-input
              class="input"
              v-model="inputKey"
              placeholder="根据编号搜索"
            ></el-input>
          </el-row>
        </el-col>
        <el-col :span="12">
          <el-row type="flex" justify="end">
            <el-button @click="clearKey">清除</el-button>
            <el-button type="primary" @click="searchKey">搜索</el-button>
          </el-row>
        </el-col>
      </div>
      <!--      提示消息-->
      <Alert :total="total" />
      <!--      表格-->
      <el-table
        :data="tableData"
        :header-cell-style="headClass"
        style="width: 100%"
      >
        <el-table-column prop="id" label="编号" width="200"></el-table-column>
        <el-table-column prop="questionType" label="题型" width="180">
          <template v-slot="{ row }">
            {{ row.questionType | questionType }}
          </template>
        </el-table-column>
        <el-table-column prop="questionIDs" label="题目编号" width="200">
          <template v-slot="{ row }">
            <div v-for="(item, index) in row.questionIDs" :key="index">
              <a
                href="#"
                style="color: rgb(0, 153, 255)"
                @click="yulanSubject(item)"
                >{{ item.number }}</a
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="addTime"
          label="录入时间"
          width="200"
        ></el-table-column>
        <el-table-column
          prop="totalSeconds"
          label="答题时间（s）"
        ></el-table-column>
        <el-table-column
          prop="accuracyRate"
          label="正确率（%）"
        ></el-table-column>
        <el-table-column prop="userName" label="录入人"></el-table-column>
        <el-table-column prop="address" label="操作">
          <template v-slot="{ row }">
            <!--            {{row}}-->
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              plain
              @click="delDialog(row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--      分页-->
      <el-row type="flex" justify="end">
        <el-pagination
          background
          layout=" sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[20, 40, 60, 80]"
          :page-size="pagesize"
          :total="total"
        >
        </el-pagination>
      </el-row>
    </el-card>
    <!--    预览题目弹层-->
    <el-dialog
      title="题目预览"
      :visible.sync="yulanDialog"
      width="900"
      :before-close="handleClose"
    >
      <el-row class="ellrow">
        <el-col :span="6"
          >【题型】:{{ xiangqing.questionType | questionType }}</el-col
        >
        <el-col :span="6">【编号】:{{ xiangqing.id }}</el-col>
        <el-col :span="6"
          >【难度】:{{ xiangqing.difficulty | difficulteType }}</el-col
        >
        <el-col :span="6">【标签】:{{ xiangqing.tags }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="6">【学科】:{{ xiangqing.subjectName }}</el-col>
        <el-col :span="6">【目录】:{{ xiangqing.directoryName }}</el-col>
        <el-col :span="12">【方向】:{{ xiangqing.direction }}</el-col>
      </el-row>
      <hr />
      <div>
        <p>【题干】:</p>
        <p v-html="xiangqing.question" :style="{ color: 'blue' }">
          {{ xiangqing.question }}
        </p>
        <!--        多选盒子-->
        <div v-if="xiangqing.questionType === '2'">
          <p>
            {{ xiangqing.questionType | questionType }}
            <span>选项:(以下选中的选项为正确答案)</span>
          </p>
          <el-checkbox-group
            v-model="checkList"
            v-for="item in xiangqing.options"
            :key="item.id"
          >
            <el-checkbox :label="item.code">{{ item.title }}</el-checkbox>
          </el-checkbox-group>
        </div>
        <!--        单选盒子-->
        <div v-if="xiangqing.questionType === '1'">
          <p>
            {{ xiangqing.questionType | questionType }}
            <span>选项:(以下选中的选项为正确答案)</span>
          </p>
          <p v-for="item in xiangqing.options" :key="item.id">
            <el-radio v-model="radio" :label="item.code">{{
              item.title
            }}</el-radio>
          </p>
        </div>
      </div>
      <hr />
      <p>
        【参考答案】:
        <el-button type="danger" @click="videoDiv = true"
          >视频答案预览</el-button
        >
      </p>
      <div v-if="videoDiv === true">
        <video
          class="vedio"
          :src="xiangqing.videoURL"
          controls="controls"
          autoplay
        ></video>
      </div>
      <hr />
      <p>
        【答案解析】:
        <span v-if="xiangqing.answerId">{{ xiangqing.answerId }}</span>
        <span v-else>{{ xiangqing.remarks }}</span>
      </p>
      <hr />
      <p>【题目备注】:{{ xiangqing.remarks }}</p>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleClose">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Alert from '@/components/Alert'
import { detail, randoms, removeRandoms } from '@/api/hmmm/questions'

export default {
  components: {
    Alert
  },
  filters: {
    questionType (questionType) {
      return questionType === '1'
        ? '单选题'
        : questionType === '2'
          ? '多选题'
          : '简答题'
    },
    difficulteType (difficulty) {
      return difficulty === '1' ? '简单' : difficulty === '2' ? '一般' : '困难'
    }
  },
  data () {
    return {
      yulanDialog: false,
      page: 1, // 当前页
      pagesize: 20, // 每页条数
      total: 1, // 数据总数
      inputKey: '',
      tableData: [
        {
          id: '',
          name: 'XXX',
          addTime: '',
          totalSeconds: '',
          accuracyRate: '',
          userName: '',
          questionType: '',
          questionIDs: [
            {
              id: '',
              number: ''
            }
          ]
        }
      ],
      xiangqing: {
        questionType: '',
        id: '',
        difficulty: '',
        tags: '',
        subjectName: '',
        directoryName: '',
        direction: '',
        question: '',
        options: [{}],
        videoURL: '',
        answerId: '',
        remarks: ''
      },
      videoDiv: false
    }
  },
  computed: {
    // 单选
    radio () {
      const arr = this.xiangqing.options.filter((item) => item.isRight === 1)
      // console.log(arr[0].code)
      return arr[0]?.code
    },
    // 多选
    checkList () {
      const arr = this.xiangqing.options.filter((item) => item.isRight === 1)
      // console.log(arr)
      const newArr = arr.map((item) => item.code)
      console.log(newArr)
      return newArr
    }
  },
  created () {
    this.getZutiList()
  },
  methods: {
    // 监听每页多少条
    handleSizeChange (val) {
      this.pagesize = val
      this.getZutiList()
    },
    // 监听页码值改变
    handleCurrentChange (val) {
      this.page = val
      this.getZutiList()
    },
    // 给表头设置颜色
    headClass () {
      return 'background:#fafafa; height:50px; border-bottom:2px solid #E8E8EA'
    },
    // 获取列表数据渲染页面
    async getZutiList () {
      const { data } = await randoms({
        page: this.page,
        pagesize: this.pagesize,
        keyword: this.inputKey
      })
      console.log(data)
      this.page = parseInt(data.page)
      this.pagesize = parseInt(data.pagesize)
      this.total = data.counts
      this.tableData = data.items
      // this.tableData.questionIDs.id=data.item.questionIDs.id
    },
    // 删除
    async delDialog (row) {
      try {
        await this.$confirm('您确定删除吗', '提示', { type: 'warning' })
        await removeRandoms(row)
        await this.getZutiList()
        this.$message.success('删除成功')
      } catch (e) {
        this.$message.error('删除失败')
      }
    },
    // 清除
    clearKey () {
      this.inputKey = ''
      this.getZutiList()
    },
    // 搜索
    async searchKey () {
      await this.getZutiList()
    },
    // 关闭弹层
    handleClose () {
      this.videoDiv = false
      this.yulanDialog = false
    },
    // 题目预览
    async yulanSubject (item) {
      console.log(item)
      const { data } = await detail({ id: item.id })
      console.log(data)
      this.xiangqing = data
      console.log(this.xiangqing.options)
      this.yulanDialog = true
    }
  }
}
</script>

<style scoped lang="less">
.ellrow {
  margin-bottom: 5px;
}

.vedio {
  width: 400px;
  height: 300px;
}
</style>
